<template>
    <div id="order">
        <div id="head">
            <ul>
                <li>
                    <div id="headTop"><!--顶部的店铺面层-->
                        <p>
                            <span>沃尔玛-秦淮店</span>
                            <i></i>
                        </p>
                        <p>进行中</p>
                    </div>
                    <p>今天 09:16</p><!--交易时间-->
                    <div id="distribution"><!--送货进度-->
                        <p>
                            <span>拣货完成</span>
                            <span>商家已完成拣货，等待配送</span>
                        </p>
                    </div>
                    <div id="information"><!--商品信息-->
                        <img src="../image/order/5ae851d1Ned63bfd0.jpg" alt="">
                        <p>
                            <span>￥16</span>
                            <span>共1件</span>
                            <span>达达专送</span>
                        </p>
                    </div>
                    <div id="complete"><!--评价和再次购买-->
                        <p>
                            <a href="">去评价</a>
                            <a href="">再次购买</a>
                        </p>
                    </div>
                </li>
                <!--以显示全部-->
                <li id="Allshow">
                    <p id="AllshowText">已显示全部</p>
                </li>
            </ul>
        </div>
        <Navs active="iocn-nav4" active1="iocn-nav4"></Navs>
    </div>
</template>
<script>
    export default {
        
    }
</script>
<style scoped lang="scss">
    *{
        margin:0;
        padding:0;
        text-decoration:none;
        list-style-type:none;
    }
//顶部
    #head{
        width:750px;
        background-color:rgb(245, 245, 245);

        ul{
            width:750px;
            
            //margin:auto;
            
            li{
                width:710px;
                //height:410px;
                display:block;
                padding:0 20px 30px 20px;
                margin-bottom:20px;
                background-color:#fff;
   
                //顶部的店铺名称
                #headTop{
                    width:710px;
                    height:68px;
                    display:flex;

                    p:nth-of-type(1){
                        width:510px;
                        height:68px;
                        display:flex;

                        span{
                            display:block;
                            width:194px;
                            height:80px;
                            margin-right:10px;
                            color:#222;
                            font-size:30px;
                            font-weight:550;
                            line-height:80px;
                            white-space:nowrap;
                        }
                        i{
                            display:block;
                            width:24px;
                            height:26px;
                            margin-top:35px;
                            background-image:url(../image/order/icon_arrow_down.png);
                            background-repeat:no-repeat;
                            background-size:100% 100%;
                        }
                    }
                    p:nth-of-type(2){
                        width:200px;
                        height:68px;
                        font-size:30px;
                        color:#47b34f;
                        text-align:right;
                        line-height:68px;
                    }
                }
                //交易时间
                p{
                    width:710px;
                    height:24px;
                    font-size:24px;
                    color:#999;
                }
                //送货进度
                #distribution{
                    width:650px;
                    height:128px;
                    padding-right:60px;
                    margin-top:20px;
                    background-color:rgb(245, 245, 245);
                    p{
                        width:610px;
                        height:88px;
                        padding:20px;

                        span{
                            display:block;
                            width:610px;
                            height:48px;
                            line-height:48px;
                        }
                        span:first-child{
                            color:#333;
                            font-size:30px;
                        }
                        span:last-child{
                            color:#999;
                            font-size:24px;
                        }
                    }
                }
                //商品信息
                #information{
                    width:710px;
                    height:120px;
                    margin-top:20px;
                    display:flex;
                    justify-content:space-between;

                    //商品图片
                    img{
                      width:100px;
                      height:100px;
                      margin:5px;  
                    }
                    //商品信息
                    p{
                        width:130px;
                        height:108px;

                        span{
                            display:block;
                            font-size:24px;
                            width:130px;
                            height:38px;
                            text-align:right;
                        }
                        span:nth-of-type(1){                            
                            color:#FF5757;
                        }
                        span:nth-of-type(2){
                            padding-bottom:6px;
                            color:#666;                           
                        }
                        span:nth-of-type(3){
                            width:110px;
                            height:24px;
                            margin-left:10px;
                            padding:0 6px;
                            border:1px solid #16a9ff;
                            border-radius:5px 1px;
                            color:#16a9ff;
                            text-align:center;
                            line-height:24px;
                            white-space:nowrap;
                            font-size:20px;
                        }
                    }
                }
                //评价和再次购买
                #complete{
                    width:710px;
                    height:66px;
                    padding-top:30px;
                    position: relative;

                    p{
                        width:296px;
                        height:66px;
                        display:flex;
                        position:absolute;
                        right:0;

                        a{
                            display:block;                          
                            height:38px;
                            padding:12px 18px;
                            border:1px solid #d9d9d9;
                            border-radius:5px;
                            font-size:28px;
                            text-align:center;
                            line-height:38px;
                            color:#333;
                            white-space:nowrap;
                        }
                        a:first-child{
                             width:84px;
                        }
                        a:last-child{
                             width:112px;
                             margin-left:20px;
                        }
                    }
                }
            }
            //以显示全部
            #Allshow{
                width:750ox;
                height:80px;
                //padding-bottom:800px;
                //background-color:rgb(245, 245, 245);


                #AllshowText{
                    height:80px;
                    text-align:center;
                    line-height:80px;
                    color:#333;
                    font-size:28px;
                    background-color:#fff;
                }
            }
        }
    }
</style>


